<template>
    <div class="audio-merge-container">
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <h2>视频与音频合成</h2>
          </div>
        </template>
  
        <el-form :model="formData" label-width="120px" :rules="rules" ref="formRef">
          <el-form-item label="视频文件" prop="videoPath">
            <FileSelector v-model="formData.videoPath" placeholder="请选择视频文件" 
                        storage-key="recentVideoPaths" />
          </el-form-item>
  
          <el-form-item label="音频文件" prop="audioPath">
            <FileSelector v-model="formData.audioPath" placeholder="请选择音频文件" 
                        storage-key="recentAudioPaths" />
          </el-form-item>
  
          <el-form-item label="输出路径" prop="outputPath">
            <FileSelector v-model="formData.outputPath" placeholder="请输入输出文件路径" 
                        storage-key="recentOutputPaths" />
          </el-form-item>
  
          <el-form-item label="音频设置">
            <div class="settings-row">
              <span class="setting-label">音量调整:</span>
              <el-slider v-model="formData.settings.volume" :min="0" :max="2" :step="0.1" 
                        :format-tooltip="value => `${value}x`" style="width: 200px" />
            </div>
            
            <div class="settings-row">
              <span class="setting-label">开始时间:</span>
              <el-input-number v-model="formData.settings.start_time" :min="0" :step="1" 
                            placeholder="秒" style="width: 150px" />
            </div>
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" @click="mergeFiles" :loading="processing" 
                      :disabled="processing || true">
              开始合成
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <log-console :logs="logs" @clear-logs="clearLogs" class="log-section" />
    </div>
  </template>
  
  <script>
  import { ref, reactive, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import LogConsole from '@/components/LogConsole.vue';
  import FileSelector from '@/components/FileSelector.vue';
  import mergeService from '@/views/Mergeview/services/mergeService.js';
  import settingsService from '@/services/settingsService.js';
  
  export default {
    name: 'AudioMergeView',
    components: {
      LogConsole,
      FileSelector
    },
    setup() {
      const formRef = ref(null);
      const processing = ref(false);
      const logs = ref([]);
  
      const formData = reactive({
        videoPath: '',
        audioPath: '',
        outputPath: '',
        settings: {
          volume: 1.0,
          start_time: 0
        }
      });
  
      const rules = {
        videoPath: [
          { required: true, message: '请选择视频文件', trigger: 'blur' }
        ],
        audioPath: [
          { required: true, message: '请选择音频文件', trigger: 'blur' }
        ],
        outputPath: [
          { required: true, message: '请输入输出文件路径', trigger: 'blur' }
        ]
      };
  
      const mergeFiles = async () => {
        if (!formRef.value) return;
        
        await formRef.value.validate(async (valid) => {
          if (!valid) {
            ElMessage.error('请填写必要的信息');
            return;
          }
  
          try {
            processing.value = true;
            addLog(`开始合成处理: 视频=${formData.videoPath}, 音频=${formData.audioPath}`);
            
            const response = await mergeService.mergeVideoWithAudio(
              formData.videoPath,
              formData.audioPath,
              formData.outputPath,
              formData.settings
            );
  
            if (response.success) {
              ElMessage.success('视频与音频合成成功');
              addLog(`合成成功，输出到: ${formData.outputPath}`);
              saveSettings();
            } else {
              ElMessage.error(response.message || '合成失败');
              addLog(`合成失败: ${response.message}`);
            }
          } catch (error) {
            ElMessage.error('合成失败: ' + error.message);
            addLog(`合成失败: ${error.message}`);
          } finally {
            processing.value = false;
          }
        });
      };
  
      const addLog = (message) => {
        const timestamp = new Date().toLocaleTimeString();
        logs.value.push(`[${timestamp}] ${message}`);
      };
  
      const clearLogs = () => {
        logs.value = [];
      };
  
      const saveSettings = () => {
        settingsService.saveSettings('audio_merge_settings', {
          videoPath: formData.videoPath,
          audioPath: formData.audioPath,
          outputPath: formData.outputPath,
          settings: formData.settings
        });
      };
  
      const loadSettings = () => {
        const savedSettings = settingsService.loadSettings('audio_merge_settings');
        if (savedSettings) {
          formData.videoPath = savedSettings.videoPath || '';
          formData.audioPath = savedSettings.audioPath || '';
          formData.outputPath = savedSettings.outputPath || '';
          
          if (savedSettings.settings) {
            formData.settings.volume = savedSettings.settings.volume || 1.0;
            formData.settings.start_time = savedSettings.settings.start_time || 0;
          }
        }
      };
  
      onMounted(() => {
        loadSettings();
      });
  
      return {
        formRef,
        formData,
        rules,
        processing,
        logs,
        mergeFiles,
        clearLogs
      };
    }
  };
  </script>
  
  <style scoped>
  .audio-merge-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .settings-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .log-section {
    margin-top: 20px;
  }
  
  .settings-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .setting-label {
    width: 80px;
    display: inline-block;
    margin-right: 10px;
  }
  </style>